<template>
  <div class="stockList">
    <el-tabs v-model="activeName" @tab-click="handelClick">
      <el-tab-pane label="备料清单" name="first">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance" />
          <el-button type="primary" class="btn" size="mini" @click="balance">{{ $t('btn.search') }}</el-button>
          <filtration
            class="btn1"
            :ftype="ftype"
            :msg="tacitly"
            :table-header="tableHeader"
            :detail-header="tableHeader"
            :select-data="selectData"
            @seachData="handleQueryBomList"
          />
        </div>
        <div>
          <jc-table
            :table-data="tableData"
            :table-header="tableHeader"
            table-height="300px"
          />
        </div>
        <cardTab @search="handleQueryList1" />
        <div class="footer">
          <jc-pagination
            :total="total"
            :page.sync="currentPage"
            :limit.sync="size"
            @pagination="balance"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="盘点异常清单" name="third">
        <div class="header-name">
          <search :options="selectData" :msg="tacitly" @seek="collect" @hand="balance1" />
          <el-button type="primary" class="btn" size="mini" @click="balance1">{{ $t('btn.search') }}</el-button>
          <filtration
            class="btn1"
            :ftype="ftype"
            :msg="tacitly"
            :table-header="tableHeader2"
            :detail-header="tableHeader2"
            :select-data="selectData"
            @seachData="handleQueryBomList1"
          />
        </div>
        <div>
          <jc-table
            :table-data="tableData2"
            :table-header="tableHeader2"
            table-height="336px"
          />
        </div>
        <el-tabs v-model="activeName2" type="card" @tab-click="handelClick1">
          <el-tab-pane label="盘盈清单" name="first" />
          <el-tab-pane label="盘亏清单" name="two" />
        </el-tabs>
        <div class="footer">
          <jc-pagination
            :total="total2"
            :page.sync="currentPage2"
            :limit.sync="size2"
            @pagination="balance1"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
import { queryPickmtrlList, queryWmsStkcountGainList, queryWmsStkcountLossList } from '@/api/homePage/wmsStock'
import filtration from '@/components/filtration'

export default {
  components: {
    cardTab: () => import('@/components/cardTab'),
    search,
    filtration
  },
  mixins: [searData],
  data() {
    return {
      ftype: 0,
      tableData: [],
      tableHeader: [ // 备料
        { label: this.$t('market.planCollectionTime'), prop: 'fdate' },
        { label: this.$t('shop.customerOrder'), prop: 'salKhddh' },
        { label: this.$t('market.order'), prop: 'fsaleorderno' },
        { label: this.$t('market.ingredient'), prop: 'ppbomBillNo' },
        { label: this.$t('market.fmodel'), prop: 'fmodel' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecificaTion' },
        { label: this.$t('market.stock2'), prop: 'fstockName' },
        { label: this.$t('market.stockQty'), prop: 'fbaseQty' },
        { label: this.$t('market.funit'), prop: 'funitName' },
        { label: this.$t('market.appQty'), prop: 'fappQty' },
        { label: this.$t('market.realqty'), prop: 'factualQty' },
        { label: this.$t('market.ReceivingWorkshop'), prop: 'fworkshop' },
        { label: this.$t('market.pickstatus'), prop: '' },
        { label: this.$t('market.deliveryTime2'), prop: 'fapproveDate' },
        { label: this.$t('market.picker'), prop: 'fpicker' },
        { label: this.$t('market.sendingPeople'), prop: 'fstockerName' }
      ],
      currentPage: 1,
      size: 50,
      total: 0,
      tableData2: [],
      tableHeader2: [ // 盘点异常清单
        { label: this.$t('market.fdate'), prop: 'fdate', width: '120' },
        { label: this.$t('market.billNo'), prop: 'fbillno', width: '120' },
        { label: this.$t('market.barcode'), prop: 'fcode', width: '120' },
        { label: this.$t('market.fmodel'), prop: 'fmodel', width: '120' },
        { label: this.$t('market.fmaterial'), prop: 'fnumber', width: '120' },
        { label: this.$t('shop.fname2'), prop: 'fname', width: '120' },
        { label: this.$t('shop.fspecificaTion'), prop: 'fspecification', width: '140' },
        // { label: this.$t('shop.fdescripTion'), prop: 'fdescription' },
        { label: this.$t('market.funit'), prop: 'funit', width: '80' },
        { label: this.$t('market.gainLoss'), prop: 'fqty', width: '120' },
        { label: this.$t('market.valueOf'), prop: 'fworth', width: '80' },
        { label: this.$t('market.stockname'), prop: 'fstockDesc' },
        { label: this.$t('market.stockname1'), prop: 'fposition' },
        { label: this.$t('market.operationOrder'), prop: 'fsourcebillno', width: '110' },
        { label: this.$t('market.createDate'), prop: 'fcreatedate' }
      ],
      currentPage2: 1,
      size2: 50,
      total2: 0,
      activeName: 'first',
      activeName2: 'first'
    }
  },
  created() {
    this.oldTabHeader2 = this.tableHeader2
    this.balance()
  },
  methods: {
    handelClick(tab) {
      this.searCollData = []
      this.searchSon = []
      if (tab.name === 'third') {
        this.tableData2.length === 0 && this.balance1()
      }
    },
    handelClick1(tab) {
      this.searCollData = []
      this.searchSon = []
      // if (tab.name === 'two') {
      this.balance1()
      // }
    },
    // 备料清单
    balance() {
      const DATA = {
        pageNum: this.currentPage,
        pageSize: this.size,
        fdocumentstatus: 'B',
        search: this.searCollData
      }
      queryPickmtrlList(DATA).then(res => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
      })
    },
    handleQueryBomList(ev) {
      this.currentPage = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle(ev)
        this.balance(ev.detail)
      } else {
        this.balance()
      }
    },
    handleQueryList1(ev) {
      this.searCollData = []
      this.pageNum = 1
      this.searCollData = ev
      this.searchSon = ev
      this.balance()
    },
    // 盘盈、盘亏
    balance1() {
      const DATA = {
        pageNum: this.currentPage2,
        pageSize: this.size2,
        fdocumentstatus: 'B',
        search: this.searCollData
      }
      const api = this.activeName2 === 'first' ? queryWmsStkcountGainList : queryWmsStkcountLossList
      api(DATA).then(res => {
        if (res.code === 0) {
          this.tableData2 = res.data.array
          this.total2 = res.data.total
        }
      })
    },
    handleQueryBomList1(ev) {
      this.currentPage2 = 1
      if (ev && ev.fname) {
        this.searchSon = ev.detail
        this.customHandle1(ev)
        this.balance1(ev.detail)
      } else {
        this.balance1()
      }
    },
    // 方案 -- 自定义列表
    customHandle(ev) {
      this.tableHeaders = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader.forEach(res => {
            if (res.label === item) {
              this.tableHeaders.push(res)
            }
          })
        })
        this.tableHeader = this.tableHeaders
      } else if (ev.fname === '筛选方案') {
        this.tableHeader = this.oldTabHeader
      }
    },
    // 方案 -- 自定义列表
    customHandle1(ev) {
      this.tableHeaders2 = []
      if (ev.header && ev.header.length > 0) {
        ev.header.forEach(item => {
          this.tableHeader2.forEach(res => {
            if (res.label === item) {
              this.tableHeaders2.push(res)
            }
          })
        })
        this.tableHeader2 = this.tableHeaders2
      } else if (ev.fname === '筛选方案') {
        this.tableHeader2 = this.oldTabHeader2
      }
    }
  }
}
</script>

<style scoped lang="scss">
.stockList {
  @include listBom;
  padding: 0;
  .header-name {
    position: relative;
    top: -5px;
    margin-bottom: 10px;
    display: flex;
    .btn {
      margin-left: 450px;
      transform: translateY(18%);
    }
    .btn1 {
      transform: translateY(25%);
    }
  }
}
</style>

